import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import classnames from 'classnames';
import style from './style.less';

import { Link, hashHistory, RouterContext } from 'react-router';

export default React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },
    routeTo(path) {
        hashHistory.push(path);
    },
    isActive(path) {
        return this.context.router.isActive(path);
    },
    render() {
        return (
            <div className={classnames(style.nav, 'clearfix')}>
                <div>
                    <a href="#" onClick={this.routeTo.bind(null, '/')}>Webpack React Scaffold</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a eventKey={1} href="javascript:;"
                       className={this.isActive('/dashboard')?'active':''}
                       onClick={this.routeTo.bind(null, '/dashboard')}>Dashboard</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a eventKey={2} href="javascript:;"
                       className={this.isActive('/statistics')?'active':''}
                       onClick={this.routeTo.bind(null, '/statistics')}>Statistics</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="javascript:;" eventKey={3} title="Config" id="config-drop-menu"
                       className={this.isActive('/config')?'active':''}
                       onClick={this.routeTo.bind(null, '/config')}> config </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a eventKey={3.1} href="javascript:;"
                       className={this.isActive('/config/abc')?'active':''}
                       onClick={(event) => {event.stopPropagation(); this.routeTo('/config/abc')}}>config.abc</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a eventKey={3.1} href="javascript:;"
                       className={this.isActive('/config/def')?'active':''}
                       onClick={(event) => {event.stopPropagation(); this.routeTo('/config/def')}}>config.def</a>&nbsp;&nbsp;&nbsp;&nbsp;

                    <a eventKey={4} href="javascript:;"
                         className={this.isActive('/unknown')?'active':''}
                         onClick={this.routeTo.bind(null, '/unknown')}>Unknown Route
                    </a>
                </div>
            </div>
        );
    }
});
